<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Drawer 抽屉</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭。</p>
	<a-button type="primary" @click="showDrawer1" style="margin-left: 20px;">Open</a-button>
	<a-drawer :open="open1" width="50%" @close="onClose1" class="custom-class" root-class-name="root-class-name" :root-style="{ color: 'blue' }"
		style="color: red" title="Basic Drawer" placement="right" @after-open-change="afterOpenChange">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-drawer>
	
	<a-divider class="a-divi" orientation="left">自定义位置</a-divider><!-- =============================================================== -->
	<p class="desc">自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭</p>
	<a-radio-group v-model:value="placement" style="margin-right: 8px">
		<a-radio value="top">top</a-radio>
		<a-radio value="right">right</a-radio>
		<a-radio value="bottom">bottom</a-radio>
		<a-radio value="left">left</a-radio>
	</a-radio-group>
	<a-button type="primary" @click="showDrawer2">Open</a-button>
	<a-drawer :open="open2" title="Basic Drawer" :placement="placement" :closable="false" @close="onClose2">
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-drawer>
	
	<a-divider class="a-divi" orientation="left">抽屉表单</a-divider><!-- =============================================================== -->
	<p class="desc">在抽屉中使用表单。</p>
	<a-button type="primary" @click="showDrawer3" style="margin-left: 20px;">New account</a-button>
	<a-drawer title="账号创建" :width="720" :open="open3" :body-style="{ paddingBottom: '80px' }" :footer-style="{ textAlign: 'right' }" @close="onClose3">
		<a-form :model="form" :rules="rules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="Name" name="name">
						<a-input v-model:value="form.name" placeholder="Please enter user name" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="Url" name="url">
						<a-input v-model:value="form.url" style="width: 100%" addon-before="http://" addon-after=".com" placeholder="please enter url" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="Owner" name="owner">
						<a-select v-model:value="form.owner" placeholder="Please a-s an owner">
							<a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
							<a-select-option value="mao">Maomao Zhou</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="Type" name="type">
						<a-select v-model:value="form.type" placeholder="Please choose the type">
							<a-select-option value="private">Private</a-select-option>
							<a-select-option value="public">Public</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="Approver" name="approver">
						<a-select v-model:value="form.approver" placeholder="Please choose the approver">
							<a-select-option value="jack">Jack Ma</a-select-option>
							<a-select-option value="tom">Tom Liu</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="DateTime" name="dateTime">
						<a-date-picker v-model:value="form.dateTime" style="width: 100%" :get-popup-container="trigger => trigger.parentElement" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="24">
					<a-form-item label="Description" name="description">
						<a-textarea v-model:value="form.description" :rows="4" placeholder="please enter url description" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #extra>
			<a-space>
				<a-button @click="onClose3">Cancel</a-button>
				<a-button type="primary" @click="onClose3">Submit</a-button>
			</a-space>
		</template>
	</a-drawer>
	
	<a-divider class="a-divi" orientation="left">信息预览抽屉</a-divider><!-- =============================================================== -->
	<p class="desc">需要快速预览对象概要时使用，点击遮罩区关闭。</p>
	<p class="desc">a-list的renderItem插槽不能正常使用；description-item组件不能正常使用</p>
	<!-- <a-list :data-source="[{name: 'Lily',},{name: 'Lily2',},]" bordered>
		<template #renderItem="{ item }">
			<a-list-item :key="`a-${item.id}`">
				<template #actions><a @click="showDrawer">View Profile</a></template>
				<a-list-item-meta description="Progresser XTech">
					<template #title>
						<a href="https://www.antdv.com/">{{ item.name }}</a>
					</template>
					<template #avatar>
						<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
					</template>
				</a-list-item-meta>
			</a-list-item>
		</template>
	</a-list> -->
	<a-button type="primary" @click="showDrawer4" style="margin-left: 20px;">点击</a-button>
	<a-drawer width="640" placement="right" :closable="false" :open="open4" @close="onClose4">
		<p :style="[pStyle, pStyle2]">User Profile</p>
		<p :style="pStyle">Personal</p>
		<a-row>
			<a-col :span="12">
				<a-descriptions title="User Info">
					<a-descriptions-item label="Full Name">Lily</a-descriptions-item>
				</a-descriptions>
			</a-col>
			<a-col :span="12">
				<description-item title="Account" content="AntDesign@example.com"></description-item>
			</a-col>
		</a-row>
	<!-- 
		<a-row>
			<a-col :span="12">
				<description-item title="City" content="HangZhou" />
			</a-col>
			<a-col :span="12">
				<description-item title="Country" content="China🇨🇳" />
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="12">
				<description-item title="Birthday" content="February 2,1900" />
			</a-col>
			<a-col :span="12">
				<description-item title="Website" content="-" />
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="12">
				<description-item title="Message" content="Make things as simple as possible but no simpler." />
			</a-col>
		</a-row>
		<a-divider />
		<p :style="pStyle">Company</p>
		<a-row>
			<a-col :span="12">
				<description-item title="Position" content="Programmer" />
			</a-col>
			<a-col :span="12">
				<description-item title="Responsibilities" content="Coding" />
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="12">
				<description-item title="Department" content="XTech" />
			</a-col>
			<a-col :span="12">
				<description-item title="Supervisor">
					<template #content><a>Lin</a></template>
				</description-item>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="24">
				<description-item title="Skills"
					content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc." />
			</a-col>
		</a-row>
		<a-divider />
		<p :style="pStyle">Contacts</p>
		<a-row>
			<a-col :span="12">
				<description-item title="Email" content="ant-design-vue@example.com" />
			</a-col>
			<a-col :span="12">
				<description-item title="Phone Number" content="+86 181 0000 0000" />
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="24">
				<description-item title="Github">
					<template #content>
						<a href="https://github.com/vueComponent/ant-design-vue">
							github.com/vueComponent/ant-design-vue
						</a>
					</template>
				</description-item>
			</a-col>
		</a-row>
	 -->
	</a-drawer>
	
	<a-divider class="a-divi" orientation="left">额外操作</a-divider><!-- =============================================================== -->
	<p class="desc">在 Ant Design 规范中，操作按钮建议放在抽屉的右上角，可以使用 extra 属性来实现。</p>
	<a-radio-group v-model:value="placement5" style="margin-right: 8px">
		<a-radio value="top">top</a-radio>
		<a-radio value="right">right</a-radio>
		<a-radio value="bottom">bottom</a-radio>
		<a-radio value="left">left</a-radio>
	</a-radio-group>
	<a-button type="primary" @click="showDrawer5">Open</a-button>
	<a-drawer :width="500" title="自定义标题" :placement="placement5" :open="open5" @close="onClose5">
		<template #extra>
			<a-button style="margin-right: 8px" @click="onClose5">Cancel</a-button>
			<a-button type="primary" @click="onClose5">Submit</a-button>
		</template>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-drawer>
	
	<a-divider class="a-divi" orientation="left">渲染在当前 DOM</a-divider><!-- =============================================================== -->
	<p class="desc">渲染在当前 dom 里。自定义容器，查看 getContainer。</p>
	<div :style="{height: '300px',overflow: 'hidden',position: 'relative',border: '1px solid #ebedf0',borderRadius: '2px',padding: '48px',textAlign: 'center',background: '#fafafa',}">
		在此渲染
		<div style="margin-top: 16px">
			<a-button type="primary" @click="showDrawer6">Open6</a-button>
		</div>
		<a-drawer title="标题" placement="right" :open="open6" :get-container="false" :style="{ position: 'absolute' }" @close="onClose6">
			<p>一些内容...</p>
		</a-drawer>
	</div>
	
	<a-divider class="a-divi" orientation="left">多层抽屉</a-divider><!-- =============================================================== -->
	<p class="desc">在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。</p>
	<a-button type="primary" @click="showDrawer7" style="margin-left: 20px;">Open7</a-button>
	<a-drawer v-model:open="open7" title="外层" width="520" :closable="false" :footer-style="{ textAlign: 'right' }" @close="onClose7">
		<a-button type="primary" @click="showDrawer8">双层抽屉</a-button>
		<a-drawer v-model:open="open8" title="内层" width="320" :closable="false">
			<a-button type="primary" @click="innerDrawer">这是内层抽屉...</a-button>
		</a-drawer>
	
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose7">Cancel</a-button>
			<a-button type="primary" @click="onClose7">Submit</a-button>
		</template>
	</a-drawer>
	
	<!-- 试试3层 -->
	<a-button type="primary" @click="showDrawer01" style="margin-left: 20px;">三层抽屉</a-button>
	<a-drawer v-model:open="open01" title="外层标题" width="820" :footer-style="{ textAlign: 'right' }" @close="onClose01">
		<a-button type="primary" @click="showDrawer02">打开中层抽屉</a-button>
		<a-drawer v-model:open="open02" title="中层标题" width="520">
			<a-button type="primary" @click="showDrawer03">打开内层抽屉</a-button>
			<a-drawer v-model:open="open03" title="内层标题" width="320">
				<a-button type="primary" @click="innerDrawer03">点我看看</a-button>
			</a-drawer>
		</a-drawer>
	
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose01">Cancel</a-button>
			<a-button type="primary" @click="onClose01">Submit</a-button>
		</template>
	</a-drawer>
	
	<a-divider class="a-divi" orientation="left">预设宽度</a-divider><!-- =============================================================== -->
	<p class="desc">抽屉的默认宽度为 378px，另外还提供一个大号抽屉 736px，可以用 size 属性来设置。</p>
	<a-button type="primary" style="margin:0px 20px" @click="showDrawer9('default')">Open Default Size (378px)</a-button>
	<a-button type="primary" @click="showDrawer9('large')">Open Large Size (736px)</a-button>
	<a-drawer title="Basic Drawer" :size="size9" :open="open9" @close="onClose9">
		<template #extra>
			<a-button style="margin-right: 8px" @click="onClose9">Cancel</a-button>
			<a-button type="primary" @click="onClose9">Submit</a-button>
		</template>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-drawer>
	
	<!-- 试试其他方式：左右时，直接设置width最好用，还支持设置百分比宽度；上下时，size设置高度（default | large）height也可以设置高度 -->
	<a-button type="primary" @click="showDrawer10" style="margin-left: 20px;">试试自定义</a-button>
	<a-drawer title="自定义宽度" :open="open10" placement="right" size='large' width="80%" @close="onClose10">
		<template #extra>
			<a-button style="margin-right: 8px" @click="onClose10">Cancel</a-button>
			<a-button type="primary" @click="onClose10">Submit</a-button>
		</template>
		<p>Some contents...</p>
		<p>Some contents...</p>
		<p>Some contents...</p>
	</a-drawer>
	
	
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		open1: false,
		open2: false,
		placement: 'left',
		
		placement5: 'left',
		open5: false,
		open6: false,
		
		open3: false,
		form: {
			name: '',
			url: '',
			owner: '',
			type: '',
			approver: '',
			dateTime: null,
			description: '',
		},
		rules: {
			name: [{ required: true, message: '名字是必须的' }],
			url: [{ required: true, message: 'please enter url' }],
			owner: [{ required: true, message: 'Please select an owner' }],
			type: [{ required: true, message: 'Please choose the type' }],
			approver: [{ required: true, message: 'Please choose the approver' }],
			dateTime: [{ required: true, message: 'Please choose the dateTime', type: 'object' }],
			description: [{ required: true, message: 'Please enter url description' }],
		},
		
		open4: false,
		pStyle: {
			fontSize: '16px',
			color: 'rgba(0,0,0,0.85)',
			lineHeight: '24px',
			display: 'block',
			marginBottom: '16px',
		},
		pStyle2: {
			marginBottom: '24px',
		},
		
		open7: false,
		open8: false,
		open9: false,
		open10: false,
		
		open01: false,
		open02: false,
		open03: false,
	}
},
methods:{
	afterOpenChange(bool){
		console.log('打开抽屉', bool);
	},
	showDrawer1(){
		this.open1 = true;
	},
	onClose1(){
		this.open1 = false;
	},
	
	showDrawer2(){
		this.open2 = true;
	},
	onClose2(){
		this.open2 = false;
	},
	
	showDrawer3(){
		this.open3 = true;
	},
	onClose3(){
		this.open3 = false;
	},
	
	showDrawer4(){
		this.open4 = true;
	},
	onClose4(){
		this.open4 = false;
	},
	
	showDrawer5(){
		this.open5 = true;
	},
	onClose5(){
		this.open5 = false;
	},
	
	showDrawer6(){
		this.open6 = true;
	},
	onClose6(){
		this.open6 = false;
	},
	
	showDrawer7(){
		this.open7 = true;
	},
	onClose7(){
		this.open7 = false;
	},
	showDrawer8(){
		this.open8 = true;
	},
	onClose8(){
		this.open8 = false;
	},
	innerDrawer(){
		console.log('内层按钮被点击了。');
	},
	
	showDrawer01(){
		this.open01 = true;
	},
	onClose01(){
		this.open01 = false;
	},
	showDrawer02(){
		this.open02 = true;
	},
	showDrawer03(){
		this.open03 = true;
	},
	innerDrawer03(){
		console.log('3层抽屉的内层按钮被点击了。');
	},
	
	showDrawer9(val){
		this.size9 = val;
		this.open9 = true;
	},
	onClose9(){
		this.open9 = false;
	},
	size9: 'default',
	
	showDrawer10(){
		this.open10 = true;
	},
	onClose10(){
		this.open10 = false;
	},
	
},
}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
